<template>
    <div class="score-out">
        <div class="card flex-between">
            <div class="label">我的积分</div>
            <div class="right flex">
                <span>{{score}}</span>积分
            </div>
        </div>
        <div class="card">
            <div class="label">选择提现账户</div>
            <div class="a-type flex">
                <label for="wx" class="flex">
                    <input type="radio" name="type" value="0" id="wx" checked v-model="type">
                    <img src="../../assets/img/wxpay.png" alt="">
                    微信账户
                </label>
                <label for="alipy" class="flex">
                    <input type="radio" name="type" value="1" id="alipy" v-model="type">
                    <img src="../../assets/img/apay.png" alt="">
                    支付宝账户
                </label>
            </div>
        </div>
        <div class="card">
            <div class="label">选择提现积分</div>
            <ul class="flex score-ul">
                <li v-for="(item,index) in scores" :key="index" class="flex-center" :class="{'active':score_index == index}" @click="score_index = index;money=''">
                    <span>{{item}}</span>积分
                    <div></div>
                </li>
            </ul>
            <div class="other-money flex-between">
                <input type="number" placeholder="其他金额" v-model="money" @focus="score_index = -1">
                <span>积分</span>
            </div>
        </div>
        <button class="btn" @click="submit">提交申请</button>
    </div>
</template>

<script>
    export default {
        name: "scoreOut",
        data(){
            return{
                scores:[10,20,50,100,200,500],
                score_index:0,
                money:"",
                type:0,
                score:0
            }
        },
        mounted(){
          this.getData()
        },
        methods:{
            getData(){
                this.$http.post('user/myIntegral',{}).then(res=>{
                    console.log(res)
                    this.score = res.data.userinfo.money
                })
            },
            submit(){
                this.$vux.confirm.show({
                    title:"提示",
                    content:"是否确认提现?",
                    // 组件除show外的属性
                    onCancel: ()=> {
                    },
                    onConfirm: ()=> {
                        let money = this.money ? this.money : this.scores[this.score_index];
                        if(!money){
                            this.$toast('提现金额不能为空');
                            return
                        }
                        if(Number(money) > Number(this.score)){
                            this.$toast('积分不足');
                            return;
                        }
                        this.$http.post("user/draw",{
                            type:this.type,
                            money:money
                        }).then(res=>{
                            this.$toast(res.msg)
                            if(res.code == 1){
                                setTimeout(()=>{
                                    this.$router.go(-1)
                                },500)
                            }
                        })
                    }
                })


            }
        }
    }
</script>

<style scoped lang="less">
    .score-out{
        padding: 40px 30px;
        .card{
            background-color: #ffffff;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 30px;
            margin-bottom: 60px;
            .label{
                font-size: 32px;
                color: #333333;
                font-weight: bold;
            }
            .right{
                font-size: 30px;
                color: #333333;
                span{
                    font-size: 38px;
                    font-weight: bold;
                    color: #185fff;
                    margin-right: 5px ;
                }
            }
            .other-money{
                width: 630px;
                height: 88px;
                background-color: #ffffff;
                border-radius: 10px;
                border: solid 2px #c2c2c2;
            }
        }
        .score-ul{
            flex-wrap: wrap;
            margin-top: 20px;
            li{
                width: 196px;
                height: 88px;
                border:2px solid #ddd;
                font-size: 28px;
                color: #999999;
                border-radius: 8px;
                margin-right: 21px;
                margin-bottom: 30px;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                &:nth-child(3n){
                    margin-right: 0;
                }
                span{
                    font-size: 34px;
                    font-weight: bold;
                }
                div{
                    position: absolute;
                    right:-13px;
                    bottom:-20px;
                    width: 80px;
                    height:40px;
                    transform: rotateZ(-25deg);
                    background: #185fff;
                    display: none;
                    &::after{
                        content: "✔";
                        display: inline-block;
                        position: absolute;
                        left: 42px;
                        top:-8px;
                        color:white;
                        transform: rotateZ(25deg);
                        text-align: center;
                    }
                }
            }
            .active{
                border-color: #185fff;
                color: #185fff;
                div{
                    display: block;
                }
            }
        }
        .a-type{
            padding-top:30px;
            label{
                width: 50%;
                font-size: 28px;
                color: #333333;
            }
            input{
                width: 36px;
                height: 36px;
                appearance: none;
                position: relative;
                border: 2px solid #7d7d7d;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            input:checked{
                border-color: #185fff;
            }
            input:checked:before{
                content: '';
                width: 16px;
                height: 16px;
                background:#185fff;
                border-radius: 50%;
            }
            img{
                width: 40px;
                margin:0 15px;
            }
        }
        .other-money{
            padding: 0 25px;
            box-sizing: border-box;
            input{
                width: 500px;
                height: 100% ;
                font-size: 28px;
            }
            span{
                font-size: 28px;
                color: #999999;
            }
        }
        .btn{
            position: fixed;
            left: 0;
            bottom:0;
            width: 100%;
            height: 98px;
            background-color: #185fff;
            color:white;
            font-size: 32px;
        }
    }
</style>
